<template>
  <el-dialog
    v-el-drag-dialog
    title="异常详情"
    :visible.sync="visible"
    width="800px"
    append-to-body
    @close="reset"
  >
    <div class="item">
      <el-row v-for="(item,index) in scanCodeInfo.gdsList" :key="index" :gutter="20">
        <el-col :span="5"><div>{{ item.goodsName }} <span style="color: red;">（{{ item.gdStatus && formatColumnMap(gdStatusMap, 'value', item.gdStatus, 'desc') }}瓶）</span> </div></el-col>
        <el-col :span="4"><div>申请数量：{{ item.gdCount }}</div></el-col>
        <el-col :span="4"><div>扫码数量：{{ item.realCount }}</div></el-col>
      </el-row>
    </div>
    <div class="item">
      应扫数量：{{ goodCount }}
    </div>
    <div class="item box">
      条码信息：
      <div v-for="(item,index) in scanCodeInfo.scanCode" :key="index" class="sm">
        {{ item.bottleCode }}
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      实际扫码数量：{{ scanCount }}
    </div>
  </el-dialog>
</template>

<script>
  import { queryAddCsmDefaultData, queryStockOutBillBottle } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'

  export default {
    name: 'mixedScanningCodeDetail',
    components: {
    },
    props: {
      detailData: {
        type: Object,
        required: true
      },
      gdStatusMap: {
        type: Array,
        required: true
      },
      scanCount: {
        type: Number
      },
      goodCount: {
        type: Number
      }
    },
    data() {
      return {
        parseTime,
        visible: false,
        csmId: '',
        scanCodeInfo: {},
        statusMap: {} // 状态枚举
      }
    },
    created() {
    //   this.getStatusMap()
    },
    mounted() {
    },
    methods: {
      formatColumnMap,
      async open(billCode, temp) {
        return new Promise(async(resolve) => {
          if (billCode) {
            this.resolve = resolve
            const res = await queryStockOutBillBottle({ billCode, type: 2 })
            this.scanCodeInfo.gdsList = temp.detailList
            this.scanCodeInfo.scanCode = res.data
            this.visible = true
          }
        })
      },
      async getStatusMap() {
        const res = await queryAddCsmDefaultData()
        // this.statusMap = res.data.map(l => JSON.parse(l))
        var obj = {}
        for (var value in res.data) {
          // console.log(item)
          if (this.isJsonString(res.data[value])) {
            var item = JSON.parse(res.data[value])
            obj[value] = item
          }
        }
        this.statusMap = obj
      // console.log(this.statusMap, 'data')
      },
      // 判断是否为JSON对象
      isJsonString(str) {
        try {
          if (typeof JSON.parse(str) === 'object') {
            return true
          }
        } catch (e) {
          console.log()
        }
        return false
      },
      tabsClick(val) {
      // console.log(this.activeName)
      // val.getData()
      },
      reset() {
        this.scanCodeInfo = {}
        this.activeName = 'user'
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
.box {
  max-height: 300px;
  padding: 20px;
  margin: 20px;
  overflow-y: auto;
  border: 1px solid #39f;
  border-radius: 5px;
  div {
    padding: 5px;
    text-align: center;
    border-bottom: 1px solid #39f;
  }
}
.dialog-footer {
  text-align: right;
}
</style>
